<html>
	<head>
		<meta charset="utf-8">
		<style>
			.classification{
				position: relative;
				min-height: 400px;
				height: 100%;
			}
			.classification-main{
				margin-left: 15%;
			}
			.classification-side{
				width: 15%;
				position: absolute;
				left: 0;
				top: 102px;
				bottom: 0;
				border-right: 1px solid #ddd;
				overflow-y: scroll;
			}
			.classification-side-item{
				border-bottom: 1px solid #ddd;
			}
			.classification-title{
				font-size: 12px;
				font-weight: bolder;
				padding: 8px;
				background-color: #f5f5f5;
			}
			.classification-item{
				padding: 12px 8px;
				font-size: 12px;
				border-top: 1px dotted #ddd;
				border-bottom: 1px dotted #ddd;
				margin-bottom: -1px;
			}
			.classification-item.open{
				border-bottom: 1px solid #ddd;
				border-top: 1px solid #ddd;
			}
			.classification-item.open .classification-item-inner{
				height: auto;
			}
			.classification-item-inner{
				height: 30px;
				overflow: hidden;
			}
			.classification-item:hover{
				background-color: #fcfcfc;
			}
			.classification-item-header{
				cursor: pointer;
			}
			.classification-item-header h3{
				margin: 0;
				font-size: 14px;
				font-weight: normal;
			}
			.classification-item-line{
				background: #e5e5e5;
			    margin-top: 5px;
			    height: 5px;
			}
			.classification-item-expanded{

			}
			.classification-item-expanded ul{
				padding: 0;
				margin: 0;
			}
			.classification-item-expanded li{
				list-style: none;
				color: #666;
				font-size: inherit;
			}
			.classification-item-group{
				display: table;
				table-layout: fixed;
				width: 100%;
				margin-top: 10px;
			}
			.classification-item-group-cell{
				display: table-cell;
			}
			.classification-backlog-header{
				padding: 8px;
				border-bottom: 1px solid #ddd;
				display: flex;
				font-size: 12px;
			}
			.classification-backlog-name{
				font-weight: bolder;
			}
			.classification-backlog-issue-count{
				padding: 0 0 0 12px;
				color: #999;
			}
			.classification-backlog-inner{
				padding: 8px;
			}
			.classification-backlog-item{
				font-size: 14px;
				border: 1px solid #ddd;
				padding: 6px;
				border-left: 4px solid #ddd;
				cursor: move;
				margin: 0 0 -1px 0;
				background-color: #fff;
			}
			.classification-backlog-item:hover{
				border-left-color: #009900;
				background-color: #f5f5f5;
			}
			.classification-out-line{
				border: 2px dashed #999 !important;
			}
			.classification-none{
				display: none;
			}
			.classification-inner{
				padding: 10px;
			}
			.classification-inner .classification-backlog-item{
				display: none;
			}
			.chosen-item{
				border: 2px solid #ec0044;
			}
			/*.classification-item .sortable-chosen{
				display: none;
			}*/
		</style>
	</head>
	<body>
		<div class="classification">
			<div class="classification-side">
				<div class="classification-side-item">
					<div class="classification-title">VERSIONS</div>
				</div>
				<div class="classification-side-item">
					<div class="classification-title">VERSIONS</div>
					<div class="classification-inner" id="classification-inner">
						<div class="classification-item" data-id="1">
							<div class="classification-item-inner">
								<div class="classification-item-header">
									<h3>1.0.1</h3>
									<div class="classification-item-line"></div>
								</div>
								<div class="classification-item-expanded">
									<ul>
										<li class="classification-item-group">
											<div class="classification-item-group-cell">Start Date</div>
											<div>2/二月/18</div>
										</li>
										<li class="classification-item-group">
											<div class="classification-item-group-cell">Release Date</div>
											<div>none</div>
										</li>
										<li class="classification-item-group">
											<div class="classification-item-group-cell">问题</div>
											<div>2/二月/18</div>
										</li>
										<li class="classification-item-group">
											<div class="classification-item-group-cell">Completed</div>
											<div>2/二月/18</div>
										</li>
										<li class="classification-item-group">
											<div class="classification-item-group-cell">Unestimated</div>
											<div>2/二月/18</div>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<div class="classification-item" data-id="2">
							<div class="classification-item-inner">
								<div class="classification-item-header">
									<h3>1.0.2</h3>
									<div class="classification-item-line"></div>
								</div>
								<div class="classification-item-expanded">
									<ul>
										<li class="classification-item-group">
											<div class="classification-item-group-cell">Start Date</div>
											<div>2/二月/18</div>
										</li>
										<li class="classification-item-group">
											<div class="classification-item-group-cell">Release Date</div>
											<div>none</div>
										</li>
										<li class="classification-item-group">
											<div class="classification-item-group-cell">问题</div>
											<div>2/二月/18</div>
										</li>
										<li class="classification-item-group">
											<div class="classification-item-group-cell">Completed</div>
											<div>2/二月/18</div>
										</li>
										<li class="classification-item-group">
											<div class="classification-item-group-cell">Unestimated</div>
											<div>2/二月/18</div>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<div class="classification-item" data-id="3">
							<div class="classification-item-inner">
								<div class="classification-item-header">
									<h3>1.0.1</h3>
									<div class="classification-item-line"></div>
								</div>
								<div class="classification-item-expanded">
									<ul>
										<li class="classification-item-group">
											<div class="classification-item-group-cell">Start Date</div>
											<div>2/二月/18</div>
										</li>
										<li class="classification-item-group">
											<div class="classification-item-group-cell">Release Date</div>
											<div>none</div>
										</li>
										<li class="classification-item-group">
											<div class="classification-item-group-cell">问题</div>
											<div>2/二月/18</div>
										</li>
										<li class="classification-item-group">
											<div class="classification-item-group-cell">Completed</div>
											<div>2/二月/18</div>
										</li>
										<li class="classification-item-group">
											<div class="classification-item-group-cell">Unestimated</div>
											<div>2/二月/18</div>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="classification-side-item">
					<div class="classification-title">VERSIONS</div>
					<div class="classification-inner" id="classification-inner">
						<div class="classification-item" data-id="1">
							<div class="classification-item-inner">
								<div class="classification-item-header">
									<h3>1.0.1</h3>
									<div class="classification-item-line"></div>
								</div>
								<div class="classification-item-expanded">
									<ul>
										<li class="classification-item-group">
											<div class="classification-item-group-cell">Start Date</div>
											<div>2/二月/18</div>
										</li>
										<li class="classification-item-group">
											<div class="classification-item-group-cell">Release Date</div>
											<div>none</div>
										</li>
										<li class="classification-item-group">
											<div class="classification-item-group-cell">问题</div>
											<div>2/二月/18</div>
										</li>
										<li class="classification-item-group">
											<div class="classification-item-group-cell">Completed</div>
											<div>2/二月/18</div>
										</li>
										<li class="classification-item-group">
											<div class="classification-item-group-cell">Unestimated</div>
											<div>2/二月/18</div>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<div class="classification-item" data-id="2">
							<div class="classification-item-inner">
								<div class="classification-item-header">
									<h3>1.0.2</h3>
									<div class="classification-item-line"></div>
								</div>
								<div class="classification-item-expanded">
									<ul>
										<li class="classification-item-group">
											<div class="classification-item-group-cell">Start Date</div>
											<div>2/二月/18</div>
										</li>
										<li class="classification-item-group">
											<div class="classification-item-group-cell">Release Date</div>
											<div>none</div>
										</li>
										<li class="classification-item-group">
											<div class="classification-item-group-cell">问题</div>
											<div>2/二月/18</div>
										</li>
										<li class="classification-item-group">
											<div class="classification-item-group-cell">Completed</div>
											<div>2/二月/18</div>
										</li>
										<li class="classification-item-group">
											<div class="classification-item-group-cell">Unestimated</div>
											<div>2/二月/18</div>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<div class="classification-item" data-id="3">
							<div class="classification-item-inner">
								<div class="classification-item-header">
									<h3>1.0.1</h3>
									<div class="classification-item-line"></div>
								</div>
								<div class="classification-item-expanded">
									<ul>
										<li class="classification-item-group">
											<div class="classification-item-group-cell">Start Date</div>
											<div>2/二月/18</div>
										</li>
										<li class="classification-item-group">
											<div class="classification-item-group-cell">Release Date</div>
											<div>none</div>
										</li>
										<li class="classification-item-group">
											<div class="classification-item-group-cell">问题</div>
											<div>2/二月/18</div>
										</li>
										<li class="classification-item-group">
											<div class="classification-item-group-cell">Completed</div>
											<div>2/二月/18</div>
										</li>
										<li class="classification-item-group">
											<div class="classification-item-group-cell">Unestimated</div>
											<div>2/二月/18</div>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="classification-main">
				<div class="classification-backlog">
					<div class="classification-backlog-header">
						<div class="classification-backlog-name">WE5 Sprint 2.2</div>
						<div class="classification-backlog-issue-count">48 issues</div>
					</div>
					<div class="classification-backlog-inner">
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
					</div>
				</div>
				<div class="classification-backlog">
					<div class="classification-backlog-header">
						<div class="classification-backlog-name">WE5 Sprint 2.2</div>
						<div class="classification-backlog-issue-count">48 issues</div>
					</div>
					<div class="classification-backlog-inner">
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
					</div>
				</div>
				<div class="classification-backlog">
					<div class="classification-backlog-header">
						<div class="classification-backlog-name">WE5 Sprint 2.2</div>
						<div class="classification-backlog-issue-count">48 issues</div>
					</div>
					<div class="classification-backlog-inner">
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
						<div class="js-sortable classification-backlog-item">
							<a href="#">BTOB-2245</a>
							<span>金价配置-自动调价</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
		<script src="../lib/sortable/sortable.js"></script>
		<script type="text/javascript">
			$(function(){
				var cSide = $('.classification-side');
				$(document).on('scroll', function(){
		            if($('body').scrollTop() > 102){
		            	cSide.css({
		            		top:0
		            	})
		            }else{
		            	cSide.css({
		            		top: 102
		            	})
		            }
		        })

				var id = ''

				$(".classification-side").on('click', '.classification-item-header', function(){
					console.log($(this).parent('.classification-item'))
					if($(this).parents('.classification-item').hasClass('open')){
						$(this).parents('.classification-item').removeClass('open');
					}else{
						$(this).parents('.classification-item').addClass('open');
					}
				})

				$(".classification-item, .classification-title")
					.on('dragenter', function(event){
						event.preventDefault();  
						$(this).addClass("classification-out-line");
						console.log('enter')
					})
					.on('dragover', function(event){
						event.preventDefault();
						$(this).addClass("classification-out-line");
					})
					.on('drop', function(event){
						event.preventDefault();  
	    				id = $(this).data('id');
	    				$(this).removeClass("classification-out-line");
	    				console.log('drop')
					})
					.on('dragleave', function(event){
						event.preventDefault(); 
						console.log('dragleave')
						$(this).removeClass("classification-out-line");
					})
					.on('mouseleave', function(event){
						$(this).removeClass("classification-out-line");
					})

				// var side = document.getElementById("classification-inner");
				// var sort = Sortable.create(side, {
				// 	sort: false,
				// 	group: {
				// 		name: 'item',
				// 		put: false
				// 	},
				// 	animation: 150,
				// 	filter: '.classification-item',
				// 	onAdd: function (evt){
				// 		var item = evt.item;
				// 		console.log('add')
				// 	},
				// 	onFilter: function(evt){
				// 		console.log('filter')
				// 	}
				// })
				
				// var container = document.getElementById("classification-inner");
				// var sort = Sortable.create(container, {
				// 	sort: false,
				// 	group: 'item',
				// 	animation: 150,
				// 	onUpdate: function (evt){
				// 		var item = evt.item;
				// 	},
				// 	onAdd: function(evt){
				// 		console.log('add')
				// 	}
				// })

				// var putItems = document.getElementsByClassName('classification-item');
				// [].forEach.call(putItems, function (el){
				// 	Sortable.create(el, {
				// 		sort: false,
				// 		group: {
				// 			name: 'item',
				// 			pull: false
				// 		},
				// 		ghostClass : 'chosen-item',
				// 		animation: 150,
				// 		onAdd: function(evt){
				// 			console.log('add', evt)
				// 		}
				// 	})
				// })

				var items = document.getElementsByClassName('classification-backlog-inner');
				[].forEach.call(items, function (el){
					Sortable.create(el, {
						group: 'item',
						animation: 150,
						ghostClass: 'classification-out-line',
						onEnd: function(evt){
							console.log('end', evt.item)
		    				if(id){
		    					// ajax
		    					// ret == '200'
		    					// $(evt.item).remove()
		    				}
						}
					})
				})
			})
		</script>
	</body>
</html>